<template>
  <div class="tree">
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"
              style="display: block; width: 25%;margin-bottom: 10px;"></el-input>
    <el-col :span="6" class="task-tree">
      <div class="grid-content">
        <el-tree :data="groupData" show-checkbox node-key="id" ref="tree2"
                 highlight-current accordion
                 :props="defaultProps" :filter-node-method="filterNode"
                 @check="handleCheckChange2">
        </el-tree>
      </div>
    </el-col>
    <el-col :span="16" class="">
      <div class="grid-content tree-cont">
        <el-row>
          <el-col :span="8" v-for="(item,index) in treeList2" :key='index' class="user_item">
            <span>{{item.label}}</span>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </div>
</template>

<script>
  export default {
    name: 'DataTree',
    props: ['groupData', 'treeList2'],
    watch: {
      filterText (val) {
        this.$refs.tree2.filter(val)
      },
    },
    data () {
      return {
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        },
      }
    },
    methods: {
      filterNode (value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      async handleCheckChange2 (data, checked, indeterminate) {
        let array = []
        array = this.$refs.tree2.getCheckedNodes().filter(item => {
          return !item.children
        })
        this.$emit('update:treeList2', array)
        //   let num = await this.treeList2.findIndex(fin => {
        //     return fin.id == data.id
        //   })
        //   if (num == -1) {
        //     if (item.level) {
        //       obj = {name: data.label, id: data.id, pId: data.pId, businessOrg: data.businessOrg, level: data.level}
        //     } else {
        //       obj = {name: data.label, id: data.id, pId: data.pId, pBusinessOrg: data.pBusinessOrg, level: data.level}
        //     }
        //     arr.push(obj)
        //     this.$emit('update:treeList2', arr)
        //   } else {
        //     arr.splice(num, 1)
        //     this.$emit('update:treeList2', arr)
        //   }
      },
    }
  }
</script>

<style scoped>
  .task-tree {
    overflow-y: scroll;
    border: solid #ddd 1px;
    border-left: none;
    border-bottom: none;
    transform: translateY(-1px);
  }
  .user_item{
    padding-left: 20px!important;
  }
  .tree-cont{
    height: 253px;
    overflow-y: scroll;
    border: solid #ddd 1px;
  }
</style>
